import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Typography,
    Divider,
    Box,
    Paper
} from '@mui/material';
import { WorkExperience } from '../types';
import dayjs from 'dayjs';
import PermissionGuard from '../../../components/PermissionGuard';

interface WorkExperienceDetailDialogProps {
    open: boolean;
    onClose: () => void;
    workExperience: WorkExperience | null;
    onEdit?: () => void;
}

const WorkExperienceDetailDialog: React.FC<WorkExperienceDetailDialogProps> = ({
    open,
    onClose,
    workExperience,
    onEdit
}) => {
    if (!workExperience) {
        return null;
    }

    return (
        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
            <Paper elevation={0} sx={{ borderRadius: '8px' }}>
                <DialogTitle sx={{ fontWeight: 'bold', color: '#1976d2' }}>工作信息详情</DialogTitle>
                <Divider />
                <DialogContent>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 1 }}>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                ID:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.id}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                类型:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.offerType}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                企业/学校:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.companyCollegeName || '-'}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                职位/项目:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.positionProjectName || '-'}
                            </Typography>
                        </Box>

                        {/* <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                所属行业:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.industryName || '-'}
                            </Typography>
                        </Box> */}
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                地点:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.location || '-'}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                月薪:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.salaryMonth || '-'}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                年薪:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {workExperience.salaryYear || '-'}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                接受情况:
                            </Typography>
                            <Typography
                                variant="body1"
                                sx={{
                                    color:
                                        workExperience.acceptStatus === '接受'
                                            ? 'success.main'
                                            : workExperience.acceptStatus === '放弃'
                                            ? 'error.main'
                                            : 'info.main'
                                }}>
                                {workExperience.acceptStatus}
                            </Typography>
                        </Box>

                        <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                备注:
                            </Typography>
                            <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap', color: '#333', flex: 1 }}>
                                {workExperience.remark || '无'}
                            </Typography>
                        </Box>
                    </Box>
                </DialogContent>
                <Divider />
                <DialogActions sx={{ p: 2 }}>
                    {onEdit && (
                        <PermissionGuard requireEditFeatures>
                            <Button
                                onClick={() => {
                                    onClose(); // 先关闭详情对话框
                                    onEdit(); // 然后打开编辑对话框
                                }}
                                color="primary"
                                variant="outlined"
                                sx={{ borderRadius: '4px', px: 3 }}>
                                编辑
                            </Button>
                        </PermissionGuard>
                    )}
                    <Button onClick={onClose} color="primary" variant="contained" sx={{ borderRadius: '4px', px: 3 }}>
                        关闭
                    </Button>
                </DialogActions>
            </Paper>
        </Dialog>
    );
};

export default WorkExperienceDetailDialog;
